<template>
  <div class="form-container">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/brandList' }">品牌列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加品牌</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-content">

      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="品牌类型" prop="type" v-if="sale_type==1">
          <el-col :span="9">
            <el-radio v-model="form.type" label="1" @change="handleSaleType">家居类</el-radio>
            <el-radio v-model="form.type" label="2" @change="handleSaleType">泛家居类</el-radio>
          </el-col>
        </el-form-item>
        <el-form-item label="品牌" prop="brand_id">
          <el-col>
            <el-select v-model="form.brand_id" multiple filterable placeholder="请选择" style="width: 37.5%">
              <el-option
                v-for="item in brands"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="color:#333;">（需增加在售品牌的商户，请联系平台客服：4001355060。）</span>
          </el-col>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-col :span="9">
            <el-input v-model="form.sort" placeholder="默认为100,数字越小越靠前"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-button type="danger" @click="confirmAdd('form')">立即保存</el-button>
            <el-button type="default" @click="cancel()">返回</el-button>
          </el-row>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        brands: [],
        form: {
          type: '1',
          brand_id: '',
          sort: '100',
        },
        rules: {
          brand_id: [
            {required: true, message: '请选择品牌', trigger: 'blur'},
          ],
          sort: [
            {required: true, message: '请输入排序', trigger: 'blur'},
          ],
        },
        sale_type: 2, //表示泛家居
      }
    },
    mounted() {
      const sale_type = localStorage.getItem('sale_type');
      if (sale_type) {
        this.sale_type = sale_type;
      }
      this._initBrandData()
    },
    methods: {
      _initBrandData() {
        let type = this.form.type;
        if (this.sale_type === 2) {
          type = 2;
        }
        this.$http.get('/api/admin/shop/brand_store_rel/add', {select_type: type})
          .then(rest => {
            this.brands = rest.data;
          })
      },
      confirmAdd(form) {
        const _ths = this;
        this.$refs[form].validate((valid) => {
          if (!valid) {
            return false;
          } else {
            this.$http.post('/api/admin/shop/brand_store_rel/add', {...this.form})
              .then(rest => {
                if (rest.code == 0) {
                  this.$message.success(rest.msg);
                  setTimeout(function () {
                    _ths.$router.push({name: 'brandList'})
                  }, 800)
                } else {
                  this.$message.error(rest.msg);
                }
              })
          }
        })

      },
      cancel() {
        this.$router.push({name: 'brandList'})
      },
      handleSaleType(val) {
        this.form.type = val;
        this._initBrandData();
      }

    }
  }
</script>
<style lang="less" scoped>
  @import "index.less";
</style>